<h3>水平居中 page:310</h3>

<div class="my-container">
    <figure>
        <img width="50" alt="火星" src="../../../assets/previews/css-animations/mercury.jpg">
        <figcaption>火星</figcaption>
    </figure>
    <p class="desc">火星(Mars)是太阳系八大行星之一</p>
</div>
<h3>三栏布局</h3>
<div style="float: left">left</div>
<div style="float: right;">right</div>
<div style="margin: 0 110px">middle</div>


<div style="display: flex">
    <div style="width: 100px">left</div>
    <div style="flex-grow: 1;">middle</div>
    <div style="width: 100px">right</div>
</div>

<div style="display: grid;grid-template-columns: 100px auto 100px">
    <div>left</div>
    <div>middle</div>
    <div>right</div>
</div>

<div style="width: 320px">
    <span style="width: 14px;float: left">排名</span>
    <span style="font-size: 40px;float: left">89</span>
    <img style="width: 44px;height: 44px;float: left" src="../../../assets/previews/css-animations/mercury.jpg"
         alt="水星">
    <p>你的好友会编程的银猪在土豪榜中排名 89</p>
</div>

<div style="border: 1px solid #cccccc">
    <img alt="火星" src="../../../assets/previews/css-animations/mercury.jpg">
</div>

